<template>
	<view class="hui">

		<view class="tab_box" v-if="cate&&cate.length>0">
			<u-tabs bgColor="#F5F3F4" :height="65" :barWidth="110" activeColor='#e34b0f' inactiveColor='#000'
				fontSize="30" :list="cate" :bold="true" :is-scroll="cate.length>4" :current="current"
				@change="change"></u-tabs>
		</view>

		<view style="height:40px;" v-if="cate&&cate.length>0"></view>

		<view class="content_box" v-if="list&&params.type==1">
			<rich-text :nodes="list.content" v-if="list.content"></rich-text>
		</view>

		<view class="l_list_box" v-if="list&&params.type==2">
			<view class="l_info_box" @click="toUrl(item)" v-for="(item,index) in list" :key="index">

				<image mode="widthFix" class="l_img" :src="item.image"></image>
				<view class="l_title">{{item.title}}</view>

			</view>
		</view>


		<view v-if="list&&params.type==3" class="new_box">
			<view class="new_info" @click="toUrl(item)" v-for="(item,index) in list" :key="index">
				<image mode="widthFix" class="new_img" :src="item.image"></image>
				<view class="new_right">
					<view class="new_title">{{item.title}}</view>
					<view class="new_time">{{item.createtime}}</view>
				</view>
			</view>
		</view>


          <view class="bitmap" v-if="!list||list.length<1">
          	<image :src="none"></image>
          	<view class="gray_font fs-13">
          		暂无内容
          	</view>
          </view>

 <bottom value="党群建设"></bottom>
	</view>
</template>

<script>
	import bottom from "@/components/bottom.vue";
	export default {
		components: {
			bottom
		},
		data() {
			return {
				current: 0,
				pid: '',
				cate: [],
				params: {
					page: 1,
					limit: 10,
					type: '',
					cate_id: '',

				},
				list: '',
				total: 0,
				emptyShow: false,
				none: '',
				key:''

			}
		},
		onShow() {
			//this.getList();
		},
		onLoad(e) {
			 this.none=this.$imgUrl+'assets/img/no_content.png';
			
		    this.pid=22;
			
			if(e.key){
				this.key=e.key;
			}
			this.getCate();
		},
		methods: {
			toUrl(e){
				console.log(e);
				if(e.cate_id==1){
					uni.previewImage({
						urls:[e.image]
					})
				}else{
					uni.navigateTo({
						url:'/pages/news/info?id='+e.id
					})
				}
				
				
			},
			getCate() {
				this.$get(this.$api.newsCate, {
					pid: this.pid
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.cate = data.data;

                        if(data.msg){
							uni.setNavigationBarTitle({
								title:data.msg
							})
						}

						if (data.data && data.data.length > 0) {
							
							if(this.key){
								data.data.forEach((ritem,index)=>{
									if(ritem.id==this.key){
										this.params.cate_id = ritem.id;
										this.params.type = ritem.type;
										this.current=index;
									}
								});
							}else{
								this.params.cate_id = data.data[0].id;
								this.params.type = data.data[0].type;
							}
							
							
						} else {
							this.params.cate_id = data.msg.id;
							this.params.type = data.msg.type;
						}
						this.getList();
					}
				});
			},
			change(e) {
				console.log(e);
				this.current = e;
				this.params.cate_id = this.cate[e].id;
				this.params.type = this.cate[e].type;
				this.getList();
			},
			getList() {
				this.params.page = 1;
				this.$get(this.$api.newsNews, this.params, res => {
					let data = res.data;

					if (data.code != 1) return;

					if (this.params.type == 1) {

						if (data.data && data.data.content) {
							data.data.content = this.$formatRichText(data.data.content).replace(/src="\//g,
								'src="' + getApp().globalData
								.imgRemote + '/');
						}

						this.list = data.data;
					} else {


						if (!data.data.data || data.data.data.length < 1) {
							this.emptyShow = true;
						} else {
							this.emptyShow = false;
						}

						this.list = data.data.data;
						this.total = data.data.total;


					}



				});
			}
		},
		onReachBottom() {
			if (this.list.length < this.total && this.params.type != 1) {
				this.params.page++;
				this.$get(this.$api.newsNews, this.params, res => {
					let data = res.data;
					data.data.data.forEach(ress => {
						this.list.push(ress);
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hui {
		background-color: white;
		min-height: 100vh;
	}

	/deep/ .u-tab-item {
		background-color: transparent !important;
		font-size: 30rpx !important;
	}

	.tab_box {
		position: fixed;
		top: 44px;
		left: 0;
		width: 100%;
		background-color: #F5F3F4;
		height: 40px;
		z-index: 100;
	}

	.list_box {
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.info {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 20rpx;

	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15rpx 20rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;
	}

	.red {
		color: red;
	}

	.center {
		box-sizing: border-box;
		padding: 15rpx 20rpx;
		border-bottom: 1rpx solid #eee;

	}

	.img {
		width: 32%;
		height: 240rpx;
		border-radius: 15rpx;
	}

	.c_right {
		width: 68%;
		text-align: left;
	}

	.name {
		font-weight: bold;
	}

	.time {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.m_box {
		font-size: 24rpx;
		text-align: right;

	}

	.money {
		font-size: 32rpx;
		color: red;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
	}

	.btn {
		box-sizing: border-box;
		padding: 8rpx 25rpx;
		border: 1rpx solid black;
		font-size: 26rpx;
		border-radius: 25rpx;
		margin-left: 20rpx;
	}

	.btn_red {
		border: 1rpx solid red;
		color: red;
	}

	.bitmap {
		padding-top: 15vh;
		text-align: center;

		image {
			width: 60%;
		}
	}

	.f_s {
		display: flex;

		justify-content: space-between;
	}

	.f_c_s {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_box {
		box-sizing: border-box;
		padding: 20rpx 20rpx;
	}

	.l_list_box {
		box-sizing: border-box;
		padding:35rpx 35rpx;
	}

	.l_info_box {
		border-radius: 15rpx;
		background-color: white;
		margin-bottom: 35rpx;
		box-sizing: border-box;
		padding: 0rpx 0 20rpx 0;
	}

	.l_img {
		width: 100%;
		height: 88px;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		vertical-align: bottom;
		margin-bottom: 20rpx;
	}

	.l_title {
		font-weight: bold;
		text-align: center;
	}
   .new_img{
		width: 35%;
		height: 140rpx;
		border-radius: 15rpx;
		margin-right: 3%;
	}

	.new_box {
		box-sizing: border-box;
		padding: 10rpx 20rpx 0 20rpx;
	}

	.new_info {
		display: flex;
		box-sizing: border-box;
		padding: 25rpx 0;
		border-bottom: 2rpx solid #EAEAEA;
	}

	.new_right {
		width: 57%;
	}

	.new_title {
		font-size: 30rpx;

		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;

	}

	.new_time {
		font-size: 24rpx;
		color: #9A9A9A;
		margin-top: 15rpx;
	}
</style>
<style>
	image {
		max-width: 100%;
	}
</style>